<template>
  <view class="employee-list-container">
    <!-- 自定义导航栏 -->
    <cu-custom bgColor="bg-gradual-blue" :isBack="true">
      <block slot="content">员工列表</block>
    </cu-custom>

    <!-- 搜索栏 -->
    <view class="search-bar margin-top bg-white">
      <view class="search-input-wrapper padding">
        <input v-model="searchKeyword" 
               placeholder="搜索员工姓名或工号" 
               class="search-input" 
               @input="onSearch" />
        <text class="cuIcon-search search-icon"></text>
      </view>
    </view>

    <!-- 员工列表 -->
    <view class="employee-list margin-top">
      <view v-for="employee in filteredEmployees" :key="employee.id" 
            class="employee-item bg-white margin-bottom" 
            @click="selectEmployee(employee)">
        <view class="employee-content padding">
          <view class="flex align-center">
            <image :src="employee.avatar || '/static/images/default-avatar.png'" 
                   class="employee-avatar margin-right"></image>
            <view class="flex-sub">
              <view class="employee-name">{{ employee.name }}</view>
              <view class="employee-info text-sm text-gray">
                工号：{{ employee.employeeNo }} | {{ employee.department }}
              </view>
              <view class="work-types margin-top-xs">
                <text v-for="workType in employee.workTypes" :key="workType" 
                      class="work-type-tag">{{ workType }}</text>
              </view>
            </view>
            <view class="employee-status" :class="employee.statusClass">
              {{ employee.statusText }}
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 空状态 -->
    <view v-if="filteredEmployees.length === 0" class="empty-state text-center padding">
      <text class="cuIcon-people text-gray" style="font-size: 120rpx;"></text>
      <view class="text-gray margin-top">暂无员工</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      searchKeyword: '',
      employees: [],
      filteredEmployees: []
    }
  },

  onLoad(options) {
    this.loadEmployees()
  },

  methods: {
    loadEmployees() {
      // 模拟员工数据
      this.employees = [
        {
          id: 1,
          name: '张三',
          employeeNo: 'EMP001',
          department: '生产部',
          avatar: '',
          status: 'working',
          workTypes: ['切割', '组装'],
          statusClass: 'status-working',
          statusText: '工作中'
        },
        {
          id: 2,
          name: '李四',
          employeeNo: 'EMP002',
          department: '生产部',
          avatar: '',
          status: 'idle',
          workTypes: ['打包', '质检'],
          statusClass: 'status-idle',
          statusText: '空闲'
        }
      ]
      
      this.filteredEmployees = [...this.employees]
    },

    onSearch() {
      if (this.searchKeyword.trim()) {
        const keyword = this.searchKeyword.toLowerCase()
        this.filteredEmployees = this.employees.filter(employee => 
          employee.name.toLowerCase().includes(keyword) ||
          employee.employeeNo.toLowerCase().includes(keyword)
        )
      } else {
        this.filteredEmployees = [...this.employees]
      }
    },

    selectEmployee(employee) {
      const eventChannel = this.getOpenerEventChannel()
      if (eventChannel) {
        eventChannel.emit('selectEmployee', employee)
      }
      uni.navigateBack()
    }
  }
}
</script>

<style lang="scss" scoped>
.employee-list-container {
  min-height: 100vh;
  background-color: #f5f5f5;
}

.search-bar {
  border-radius: 12rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
  margin: 0 24rpx;
  
  .search-input-wrapper {
    position: relative;
    
    .search-input {
      width: 100%;
      height: 80rpx;
      padding: 0 60rpx 0 24rpx;
      border: 1rpx solid #d9d9d9;
      border-radius: 8rpx;
      font-size: 28rpx;
    }
    
    .search-icon {
      position: absolute;
      right: 24rpx;
      top: 50%;
      transform: translateY(-50%);
      color: #999;
    }
  }
}

.employee-list {
  margin: 0 24rpx;
  
  .employee-item {
    border-radius: 12rpx;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
    
    .employee-avatar {
      width: 80rpx;
      height: 80rpx;
      border-radius: 50%;
    }
    
    .employee-name {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
      margin-bottom: 4rpx;
    }
    
    .work-types {
      display: flex;
      flex-wrap: wrap;
      gap: 8rpx;
      
      .work-type-tag {
        padding: 4rpx 12rpx;
        background-color: #e6f7ff;
        color: #1890ff;
        border-radius: 12rpx;
        font-size: 22rpx;
      }
    }
    
    .employee-status {
      padding: 8rpx 16rpx;
      border-radius: 16rpx;
      font-size: 24rpx;
      
      &.status-working {
        background-color: #f6ffed;
        color: #52c41a;
      }
      
      &.status-idle {
        background-color: #fff7e6;
        color: #fa8c16;
      }
    }
  }
}

.empty-state {
  margin-top: 120rpx;
}
</style>
